<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>黄晓莹前端开发</title>
    <link rel="icon" href="./logo.svg" type="image/x-icon" />
    <link rel="stylesheet" href="./style2.css" />
    <link rel="stylesheet" href="./style3.css" />
    <style>
      html,
      body {
        background-color: #f5f5f5;
      }

      .page {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.15);
        background-color: #fff;
        border-color: rgb(221, 221, 221);
      }
      h1 {
        margin-left: -20px;
        padding-left: 15px;
        border-left: 5px solid #f8b62d;
      }
      .borderLine {
        border: 1px solid rgb(221, 221, 221);
      }
      .borderLeft {
        border-left: 1px solid rgb(221, 221, 221);
      }
      .borderTop {
        border-top: 1px solid #ddd;
      }
      .c-o {
        color: orange;
      }
    </style>
  </head>
  <body>
    <main class="page">
      <header>
        <h2 style="text-align: center; margin: 10px 0 20px 0;">个人简历</h2>
      </header>
      <!-- 基本信息 -->
      <section>
        <h1 class="f-s-18 f-w-900 m-b-20">个人信息</h1>
        <div class="borderLine m-b-20">
          <div class="bg-gray-lightest p-t-0 p-b-0">
            <div style="display: flex;">
              <div
                style="flex: 1.5; padding-left: 0;"
                class="col-4 p-t-10 p-b-10 p-l-10"
              >
                ● 黄晓莹 | 女 | 2000-01
              </div>
              <div style="flex: 1.6;" class="col-4 p-t-10 p-b-10 borderLeft">
                ● 籍贯 | 广西南宁
              </div>
              <div style="flex: 1.5;" class="col-4 p-t-10 p-b-10 borderLeft">
                ● 前端开发 | 1年工作经验
              </div>
            </div>
            <div style="display: flex;" class="borderTop">
              <div
                style="flex: 1.1; padding-left: 0;"
                class="col-4 p-t-10 p-b-10 p-l-10"
              >
                ● 手机: 19968185193
              </div>
              <div style="flex: 1.6;" class="col-4 p-t-10 p-b-10 borderLeft">
                ● Email: 970319868@qq.com
              </div>
            </div>
            <div style="display: flex;" class="borderTop">
              <div
                style="flex: 1.5; padding-left: 0;"
                class="col-4 p-t-10 p-b-10 p-l-10"
              >
                ● 院校 | 玉林师范学院
              </div>
              <div style="flex: 1.6;" class="col-4 p-t-10 p-b-10 borderLeft">
                ● 专业 | 计算机科学与技术
              </div>
              <div style="flex: 1.5;" class="col-4 p-t-10 p-b-10 borderLeft">
                ● 毕业 | 2023-06
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 专业技术 -->
      <section>
        <h1 class="f-s-18 f-w-900 m-b-20">专业技术</h1>
        <div class="boxes default m-b-20">
          <div class="box bg-gray-lightest">
            ● 有
            <span class="c-o">PC 端，移动端，微信小程序</span>
            等多端开发经验
          </div>
          <div class="box bg-gray-lightest">
            ● 能使用
            <span class="c-o">HTML5 + CSS3</span>
            ，并结合
            <span class="c-o">Sass/Less</span>
            等预处理器进行设计稿还原
          </div>
          <div class="box bg-gray-lightest">
            ● 会编写简单原生
            <span class="c-o">JavaScript</span>
            ，能够使用 JavaScript 美化用户端在网页的体验。
          </div>
          <div class="box bg-gray-lightest">
            ● 能够运用
            <span class="c-o">vant、elementUI</span>
            组件库和
            <span class="c-o">ECharts</span>
            可视化图表库，设计移动端和 PC 端响应式网站。
          </div>
          <div class="box bg-gray-lightest">
            ● 会经常做一些
            <span class="c-o">提高代码效率</span>
            的措施，例如封装
            <span class="c-o">公用组件，公用方法，公用Hook</span>
            等
          </div>
          <div class="box bg-gray-lightest">
            ● 具备
            <span class="c-o">uniapp</span>
            开发经验，熟悉
            <span class="c-o">前后端分离</span>
            ，能够与后端开发人员协作。
          </div>
          <div class="box bg-gray-lightest">
            ● 能够熟练使用
            <span class="c-o">vue2</span>
            开发项目，了解
            <span class="c-o">vue3</span>
            框架，可以编写简单的组件
          </div>
          <div class="box bg-gray-lightest">
            ● 在项目开发中熟练使用
            <span class="c-o">第三方组件库</span>
            进行开发，并私下阅读其源码，了解其实现的思想
          </div>
          <div class="box bg-gray-lightest">
            ● 能够使用
            <span class="c-o">webpack</span>
            搭建
            <span class="c-o">vue-cli</span>
            脚手架开发单页面项目
          </div>
          <div class="box bg-gray-lightest">
            ● 喜欢思考问题，并进行
            <span class="c-o">知识输出</span>
          </div>
        </div>
      </section>
      <section>
        <h1 class="f-s-18 f-w-900 m-b-20">工作＆项目经历</h1>
        <div class="boxes default m-b-20">
          <div class="box bg-gray-lightest">
            <div>
              <div style="display: flex; font-weight: 700; font-size: 17px;">
                <div
                  style="flex: 1.1; padding-left: 0;"
                  class="col-4 p-t-10 p-b-10 p-l-5"
                >
                  2021.03—2021.08
                </div>
                <div
                  style="flex: 1.6; text-align: center;"
                  class="col-4 p-t-10 p-b-10"
                >
                  上海麻运网络科技有限公司
                </div>
                <div
                  style="flex: 1.6; text-align: right;"
                  class="col-4 p-t-10 p-b-10"
                >
                  前端开发
                </div>
              </div>
              <span style="font-weight: 550;">
                项目名称：聚能查抖音电商数据平台（PC端）
              </span>
              <br />
              <span style="font-weight: 550;">开发周期：３个月</span>
              <br />
              <span style="font-weight: 550;">项目描述：</span>
              PC端和移动端，基于抖音数据平台提供抖音达人、商品、直播、短视频、小店等数据分析服务，为品牌主、商家匹配达人以及一站式抖音营销服务，为抖音电商主播和供货商提供的数据分析平台，帮助他们对自己的直播和产品的销售进行优化。
              <br />
              <span style="font-weight: 550;">项目职责：</span>
              <br />
              ● 负责项目前期整体，帮助其他前端人员解决问题。
              <br />
              ● 与其他相关人员商定项目的功能和UI风格，解决前端项目的难点。
              <br />
              ●
              采用vue、elementUI、Echarts图表等相关技术，并对其中可复用的部分进行组件化处理。
              <br />
              ●
              负责数据大屏，实时数据获取使用websocket进行处理，与后端商定采用protobuf对数据结构进行序列化，实时视频播放采用videoplayer组件，做到展示实时刷新数据、直播间弹幕等功能。
              <br />
              ●
              vue-router实现单⻚⾯应⽤，vuex状态管理模式，⽅便数据共享和传递，运⽤echarts动态进⾏数据统计结果的可视化展示
              <br />
              <br />
              <span style="font-weight: 550;">
                项目名称：聚能查抖音电商数据平台（APP）
              </span>
              <br />
              <span style="font-weight: 550;">项目描述：</span>
              <br />
              为抖音电商主播和供货商提供的数据分析平台，帮助他们对自己的直播和产品的销售进行优化
              <span style="font-weight: 550;">项目背景：</span>

              方便用户随时使用数据平台，从而开发app版的平台
              <br />
              <span style="font-weight: 550;">项目职责：</span>
              <br />
              ● 负责首页页面编写和数据对接，配合前端伙伴完成项目的整体页面
              <br />
              ● 与后台开发⼯程师协作完成各种数据交互
            </div>
            <br />
            <div>
              <div style="display: flex; font-weight: 700; font-size: 17px;">
                <div
                  style="flex: 1.1; padding-left: 0;"
                  class="col-4 p-t-10 p-b-10 p-l-5"
                >
                  2020.10—2021.02
                </div>
                <div
                  style="flex: 1.6; text-align: center;"
                  class="col-4 p-t-10 p-b-10"
                >
                  上海摩度网络科技有限公司
                </div>
                <div
                  style="flex: 1.6; text-align: right;"
                  class="col-4 p-t-10 p-b-10"
                >
                  web 前端开发
                </div>
              </div>
              <span style="font-weight: 550;">
                项目名称：雷之锤（小程序）
              </span>
              <br />
              <span style="font-weight: 550;">开发周期：1个月</span>
              <br />
              <span style="font-weight: 550;">项目描述：</span>
              项目为 uniapp
              开发的微信小程序，用于售卖公司路由器，用户可在首页查看近期积分兑换的
              商品及活动专场商品，可在预约后等待开奖后购买产品，在我的订单中查看订单信息，在我的服务中查询
              锤子积分、资产等。项目背景：使用已有的项目源码进行改造，以符合业务需求。
              <br />
              <span style="font-weight: 550;">项目职责：</span>
              <br />
              ● 负责项目整体，主导项目重构。
              <br />
              ● 对请求进行改造，对接口返回的信息进行统一处理和更优化的反馈给用户
              <br />
              ● 根据后端提供的新接口，更改后台中已有的增删改查的接口
              <br />
              ● 根据客户和测试的反馈对项目中的问题进行修复
              <br />
            </div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>
